<template>
  <div>
    <div id="map_china" style="height: 600px"></div>
    <div id="map_anhui" style="height: 600px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  mounted() {
    var map_china_tol_data = [
      {
        name: "北京",
        value: 480,
      },
      {
        name: "天津",
        value: 136,
      },
      {
        name: "河北",
        value: 318,
      },
      {
        name: "山西",
        value: 133,
      },
      {
        name: "内蒙古",
        value: 75,
      },
      {
        name: "辽宁",
        value: 125,
      },
      {
        name: "吉林",
        value: 93,
      },
      {
        name: "黑龙江",
        value: 483,
      },
      {
        name: "上海",
        value: 363,
      },
      {
        name: "江苏",
        value: 631,
      },
      {
        name: "浙江",
        value: 1233,
      },
      {
        name: "安徽",
        value: 990,
      },
      {
        name: "福建",
        value: 296,
      },
      {
        name: "江西",
        value: 935,
      },
      {
        name: "山东",
        value: 761,
      },
      {
        name: "河南",
        value: 1273,
      },
      {
        name: "湖北",
        value: 67800,
      },
      {
        name: "湖南",
        value: 1018,
      },
      {
        name: "广东",
        value: 1378,
      },
      {
        name: "广西",
        value: 253,
      },
      {
        name: "海南",
        value: 168,
      },
      {
        name: "重庆",
        value: 576,
      },
      {
        name: "四川",
        value: 540,
      },
      {
        name: "贵州",
        value: 146,
      },
      {
        name: "云南",
        value: 176,
      },
      {
        name: "西藏",
        value: 1,
      },
      {
        name: "陕西",
        value: 246,
      },
      {
        name: "甘肃",
        value: 133,
      },
      {
        name: "青海",
        value: 18,
      },
      {
        name: "宁夏",
        value: 75,
      },
      {
        name: "新疆",
        value: 76,
      },
      {
        name: "台湾",
        value: 108,
      },
      {
        name: "香港",
        value: 109,
      },
      {
        name: "澳门",
        value: 110,
      },
      {
        name: "南海诸岛",
        value: 0,
      },
      {
        name: "南海诸岛",
        value: 0,
      },
    ];
    // 初始化图表
    //map_china_tol：你的dom元素的id名
    var map = new Highcharts.Map("map_china", {
      title: {
        text: "中国累计确诊",
      },

      mapNavigation: {
        enabled: true,
        enableButtons: false,
        enableTouchZoom: false,
        enableDoubleClickZoomTo: true,
      },

      legend: {
        align: "left",
        floating: true,
        layout: "vertical",
        valueDecimals: 0, //图例的小数点
        symbolRadius: 0,
        symbolWidth: 45,
        symbolHeight: 20,
        itemMarginTop: 10,
        y: -150,
        squareSymbol: false,
        symbolPadding: 30, //设置图标与字之间的间隔
      },

      colorAxis: {
        dataClasses: [
          {
            to: 1,
            color: "white",
          },
          {
            from: 1,
            to: 59,
            color: "#f2ab9a",
          },
          {
            from: 59,
            to: 599,
            color: "#f96c4e",
          },
          {
            from: 599,
            to: 2999,
            color: "#f13c10",
          },
          {
            from: 2999,
            color: "#500b00",
          },
        ],
      },
      series: [
        {
          data: map_china_tol_data,
          name: "现存确诊",
          dataLabels: {
            //设置地图上的标签
            enabled: true,
            format: "{point.name}", // 显示地图上的名字
          },
          mapData: Highcharts.maps["cn/china"],
          joinBy: "name", // 根据 name 属性进行关联
        },
      ],
    });

    var map = new Highcharts.Map("map_anhui", {
      title: {
        text: "安徽实时疫监控",
      },

      legend: {
        align: "left",
        floating: true,
        layout: "vertical",
        valueDecimals: 0, //图例的小数点
        symbolRadius: 0,
        symbolWidth: 45,
        symbolHeight: 20,
        itemMarginTop: 10,
        y: -150,
        squareSymbol: false,
        symbolPadding: 30, //设置图标与字之间的间隔
      },


      colorAxis: {
        dataClasses: [
          {
            to: 1,
            color: "white",
          },
          {
            from: 1,
            to: 100,
            color: "#f2ab9a",
          },
          {
            from: 101,
            to: 999,
            color: "#f96c4e",
          },
          {
            from: 1000,
            color: "#f13c10",
          },
        ],
      },

      series: [
        {
          mapData: Highcharts.maps["cn/anhui"],
          data: [
            {
              name: "阜阳",
              value: "1231",
            },
            {
              name: "蚌埠",
              value: "99",
            },
            {
              name: "合肥",
              value: "996",
            },
          ],
          joinBy: "name",
          dataLabels: {
            //设置地图上的标签
            enabled: true,
            format: "{point.name}", // 显示地图上的名字
          },
        },
      ],

      //图表配置
    });
  },
};
</script>